<template>
  <div class="upload">
    <el-button :type="buttonType" @click="visible = true">{{ title }}</el-button>
    <el-drawer class="drawer-upload" size="50%" :title="title" :visible.sync="visible" :before-close="hideDrawer">
      <el-card class="box-card" header="已上传文件" v-if="fileList.length">
        <el-upload action="" :file-list="fileList" :before-remove="beforRemoveFile" :on-remove="removeFile" :on-preview="previewFile"></el-upload>
      </el-card>
      <el-card class="box-card" :header="uploadText" v-if="!onlyView">
        <ChunkUpload v-if="visible" :extra="extra" @change="changeFile" @completed="uploadCompleted"></ChunkUpload>
      </el-card>
      <div class="btn-footer">
        <el-button type="primary" :disabled="!uploadList.length" @click="sumbit">保存</el-button>
        <el-button @click="handleHide">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import ChunkUpload from '@/components/uploader'
  import { handleDownUrl } from '@/util/util'

  export default {
    name: 'Upload',
    components: {
      ChunkUpload
    },
    props: {
      buttonType: {
        type: String,
        default: 'primary'
      },
      title: {
        // 抽屉title
        type: String,
        default: '查看附件'
      },
      onlyView: {
        // 是不是只查看附件，无新上传功能
        type: Boolean,
        default: false
      },
      uploadText: {
        // 上传的按钮名
        type: String,
        default: '选取文件'
      },
      fileList: {
        // 已上传的文件list
        type: Array,
        default() {
          return []
        }
      },
      single: {
        type: Boolean,
        default: false
      },
      bigFileSize: {
        type: Number,
        default: 0
      },
      attrs: {
        type: Object,
        default() {
          return {
            accept: ''
          }
        }
      },
      desc: {
        type: String,
        default: ''
      }
    },
    computed: {
      imgList() {
        return this.loadedFile.filter(item => item.type === 'img')
      }
    },
    data() {
      return {
        visible: false,
        uploadList: [],
        completed: false, // 是否上传完成
        loadedFile: this.fileList,
        extra: {
          btnOptions: {
            single: this.single,
            btnText: this.uploadText,
            bigFileSize: this.bigFileSize,
            attrs: this.attrs
          },
          desc: this.desc
        }
      }
    },
    methods: {
      uploadCompleted(completed) {
        this.completed = completed
      },
      beforRemoveFile(file, fileList) {
        return this.$confirm('确定删除该附件？', '温馨提示', {
          type: 'warning'
        })
      },
      removeFile(file, fileList) {
        this.loadedFile = fileList
        this.$emit('removeFile', {
          file,
          loadedFile: fileList
        })
      },
      previewFile(file) {
        const index = this.imgList.findIndex(item => item.uid === file.uid)
        if (index > -1) {
          this.$ImagePreview(this.imgList, index)
          return
        }
        handleDownUrl(file.url, file.name)
      },
      changeFile({ file, fileList }) {
        this.uploadList = fileList
        this.$emit('addFile', {
          file,
          uploadList: fileList
        })
      },
      sumbit() {
        this.$emit('sumbit', {
          loadedFile: this.loadedFile,
          uploadList: this.uploadList
        })

        this.uploadList = []
        this.loadedFile = []
        this.visible = false
      },
      hideDrawer(done) {
        const hide = () => {
          this.uploadList = []
          this.loadedFile = []
          done()
        }

        if (!this.completed) {
          // 文件还在上传中时，关闭弹窗
          this.$confirm('文件在上传中，确认关闭该窗口？', '温馨提示', {
            confirmButtonText: '直接关闭',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              hide()
            })
            .catch(() => {})
          return
        }

        if (this.uploadList.length) {
          // 文件已经上传完成，但并未保存时，关闭弹窗
          this.$confirm('当前文件已上传完成，是否进行保存上传?', '温馨提示', {
            distinguishCancelAndClose: true, // 将回调的action分为close和cancel
            confirmButtonText: '保存',
            cancelButtonText: '直接关闭',
            type: 'warning'
          })
            .then(() => {
              this.sumbit()
            })
            .catch(action => {
              if (action === 'cancel') {
                hide()
              }
            })
          return
        }

        hide()
      },
      handleHide() {
        this.hideDrawer(() => {
          this.visible = false
        })
      }
    }
  }
</script>
<style scoped>
  .upload{
    display: inline-block;
  }
</style>
<style lang="scss">
  .drawer-upload {
    .el-drawer__header{
      display: none;
    }
    .el-upload--text {
      display: none;
    }
    .btn-footer {
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
</style>
